<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <script>
        // 自执行函数 
        // (function(){
        //     console.log('hello world');
        // })();

        // (function(num1){
        //     console.log('hello world'+num1);
        // })(6666);


        // 什么是函数节流和防抖?


        // 节流 

        // 当这个函数执行完以后 下一个函数才能执行  
        // 短时间内快速触发同一个事件(事件对应事件处理函数)
        // 第一次执行事件处理函数过程中 不能重复触发 得等到第一次处理完毕才可以触发第二次  

        // let inp = document.querySelector('input');
        // inp.oninput = (
        //     function(flag){
        //         return function(){
        //             if(flag === false){return};
        //             flag = false;
        //             // 利用定时器实现延时效果 
        //             setTimeout(()=>{
        //                 console.log(`${this.value}`);
        //                 flag = true;
        //             },300)
        //         }
        //     }
        // )(true);





        // 上面 保证了 同一时刻只能有一个函数执行 
        
        
        // 函数防抖

        //  短时间内快速触发同一个事件(事件对应事件处理函数)
        //  每一次都用下一个事件 干掉上一个事件 永远执行最后一个 

        let inp = document.querySelector('input');
        inp.oninput = (function(timer){
            return function(){
                // 干掉上一个  
                clearTimeout(timer);
                timer = setTimeout(()=>{
                    console.log(`${this.value}`)
                },300);
            }
        })()


    </script>
</body>
</html>